<template>
  <div class="ggPageTitle">
    <div class="ggPageTitle-left">
      <slot name="avatarHeader"></slot>
      <div v-if="userInfo" class="avatar">
        <div
          @click="
            () => {
              this.isImgCutShow = true;
            }
          "
          class="avatar-uploader"
        >
          <head-img
            class="imgBox"
            :src="userInfo.avatar ? `${userInfo.avatar}?${+new Date()}` : ``"
            :firstName="userInfo.firstName"
            :lastName="userInfo.lastName"
            line-height="52"
          />
          <div class="iconBox">
            <i class="material-icons iconfont iconadd_a_photo" />
          </div>
        </div>
      </div>
      <div v-if="squareInfo" class="avatar">
        <head-img
          class="imgBox squareBox"
          :src="squareInfo.avatar ? `${squareInfo.avatar}?${+new Date()}` : ``"
          :firstName="squareInfo.firstName"
          :lastName="squareInfo.lastName"
          line-height="52"
        />
      </div>
      <div class="titleInfo">
        <div class="title">{{ title }}<slot name="title-label"></slot></div>
        <div class="subTitle">
          <div v-if="subAvatarUserInfo" class="subAvatar">
            <head-img
              :src="
                subAvatarUserInfo.avatar
                  ? `${subAvatarUserInfo.avatar}?${+new Date()}`
                  : ``
              "
              :firstName="subAvatarUserInfo.firstName"
              :lastName="subAvatarUserInfo.lastName"
              line-height="32"
            />
          </div>
          <template v-if="subTitle1" class="text" :class="subTitleClassName1">
            <div>{{ subTitle1 }}</div>
            <slot name="subTitleLabel"></slot>
          </template>
        </div>
        <div v-if="subTitle2" class="subTitle" :class="subTitleClassName2">
          {{ subTitle2 }}
        </div>
        <slot name="info"></slot>
      </div>
    </div>
    <div class="ggPageTitle-right">
      <gg-menu-bar v-if="menuData.length">
        <i class="iconmore_vert-24px iconfont" />
        <template slot="menus">
          <gg-menu-bar-item
            v-for="item in menuData"
            @click="menuClick(item)"
            :key="item"
            >{{ item }}</gg-menu-bar-item
          >
        </template>
      </gg-menu-bar>
    </div>
    <ImgCutModal
      :visible.sync="isImgCutShow"
      v-if="isImgCutShow"
      @_uploadCallback="_uploadCallback"
    />
  </div>
</template>

<script>
import ImgCutModal from "@/components/edoovo-components/imgCutModal";
// import { updateUserAvatar } from '@/service/dashboard';

/**
 * @prop { userInfo } Object  用户信息，用于头像编辑
 * @prop { subAvatarUserInfo } Object  subTitle1的头像
 * @prop { title } String  Page title 文字
 * @prop { subTitle1 } String  subTitle1 文字
 * @prop { subTitle2 } String  subTitle2 文字
 * @prop { menuData } Array  右侧下拉操作菜单列表数据
 */
export default {
  name: `GgPageHeader`,
  data() {
    return {
      isImgCutShow: false,
    };
  },
  props: {
    userInfo: {
      type: Object,
      default: null,
    },
    squareInfo: { type: Object, default: null },
    subAvatarUserInfo: {
      type: Object,
      default: null,
    },
    title: {
      type: String,
      default: "",
    },
    subTitle1: {
      type: String,
      default: "",
    },
    subTitleClassName1: String,
    subTitleClassName2: String,
    subTitle2: {
      type: String,
      default: "",
    },
    menuData: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    ImgCutModal,
  },
  methods: {
    _uploadCallback(formData) {
      // updateUserAvatar(formData).then((res) => {
      //   this.handleAvatarSuccess(res);
      // });
    },
    menuClick(item) {
      this.$emit("menuCallback", item);
    },
  },
};
</script>

<style lang="less" scoped>
.ggPageTitle {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #fff;
  padding: 0 8px 24px;
  border-bottom: 1px solid #e3e3e3;
  margin-bottom: 20px;
  &:not(:first-child) {
    padding-top: 24px;
  }
  &-left {
    display: flex;
    .avatar {
      width: 52px;
      height: 52px;
      background-color: #efefef;
      border-radius: 50%;
      margin-right: 20px;
      .avatar-uploader {
        cursor: pointer;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background: #445469;
        color: #fff;
        text-align: center;
        position: relative;
        .iconBox {
          width: 24px;
          height: 24px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          bottom: 0;
          right: 0;
          .iconfont {
            font-size: 16px;
            color: rgba(95, 99, 104, 0.5);
          }
        }
        &:hover {
          .iconBox {
            .iconfont {
              color: rgba(95, 99, 104, 1);
            }
          }
        }
      }
    }
    .squareBox {
      border-radius: 8px;
    }
    .titleInfo {
      .title {
        display: flex;
        align-items: center;
        font-family: OpenSans;
        font-weight: bold;
        color: #202124;
        font-size: 22px;
        line-height: normal;
        margin-bottom: 4px;
      }
      .subTitle {
        font-family: Roboto;
        font-size: 14px;
        line-height: normal;
        color: #202124;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        .greenTitle {
          color: #0b8043;
        }
        .redTitle {
          color: #ea4335;
        }
        .subAvatar {
          width: 32px;
          height: 32px;
          background-color: #efefef;
          border-radius: 50%;
          margin-right: 8px;
        }
      }
    }
  }
  &-right {
  }
}
</style>
